// element-wrapper.js
// ElementPlus组件包装器 - 提供拖拽和缩放功能

const ElementWrapper = {
    name: 'ElementWrapper',
    props: {
        // 组件类型
        type: { type: String, required: true },
        // 组件属性
        componentProps: { type: Object, default: () => ({}) },
        // 初始位置和尺寸
        x: { type: Number, default: 0 },
        y: { type: Number, default: 0 },
        width: { type: Number, default: null },
        height: { type: Number, default: null },
        // 是否选中
        selected: { type: Boolean, default: false },
        // 组件ID
        id: { type: String, required: true },
        // z-index
        zIndex: { type: Number, default: 1 },
        wrapperChildren: { type: Array, default: () => [] }
 
    },
    emits: [
        'update:x', 'update:y', 'update:width', 'update:height', 'update:selected',
        'drag-start', 'drag', 'drag-end', 'resize-start', 'resize', 'resize-end', 'select', 'remove','add-child'
    ],
    data() {
        return {
            // 内部状态
            isDragging: false,
            isResizing: false,
            resizeDirection: '',
            // 拖拽和缩放的起始位置和尺寸
            dragStartX: 0,
            dragStartY: 0,
            dragStartLeft: 0,
            dragStartTop: 0,
            resizeStartX: 0,
            resizeStartY: 0,
            resizeStartWidth: 0,
            resizeStartHeight: 0,
            // 内部位置和尺寸状态
            innerX: this.x,
            innerY: this.y,
            innerWidth: this.width || null, // 先设为null，稍后根据内容自动调整
            innerHeight: this.height || null, // 先设为null，稍后根据内容自动调整
            // 是否选中
            isSelected: this.selected,
            // 是否已自动调整尺寸
            hasAutoResized: false,
            // 内容观察器
            contentObserver: null,
            // 容器拖拽状态
            isDragOver: false,
            // 容器子组件
            hasChildren: false,
       
        };
    },
    computed: {
        style() {
            return {
                position: 'absolute',
                left: `${this.innerX}px`,
                top: `${this.innerY}px`,
                width: `${this.innerWidth}px`,
                height: `${this.innerHeight}px`,
                zIndex: this.isSelected ? this.zIndex + 1 : this.zIndex,
                border: this.isSelected ? '1px dashed #409EFF' : '1px solid transparent',
                boxShadow: this.isSelected
                    ? '0 2px 12px 0 rgba(64, 158, 255, 0.3)'
                    : 'none',
                boxSizing: 'border-box',
                userSelect: this.isDragging || this.isResizing ? 'none' : 'auto',
                transition: this.isDragging || this.isResizing
                    ? 'none'
                    : 'border-color 0.3s, box-shadow 0.3s, transform 0.3s',
                opacity: this.isDragging ? 0.8 : 1,
                borderRadius: '3px',
                pointerEvents: 'auto',
                transform: this.isSelected ? 'scale(1.005)' : 'scale(1)',
                backgroundColor: this.isSelected ? 'rgba(255, 255, 255, 0.9)' : 'rgba(255, 255, 255, 0.7)'
            };
        },
        // 组件显示名称
        componentDisplayName() {
            switch (this.type) {
                case 'button': return '按钮';
                case 'input': return '输入框';
                case 'card': return '卡片';
                case 'switch': return '开关';
                case 'slider': return '滑块';
                case 'progress': return '进度条';
                case 'rate': return '评分';
                case 'checkbox': return '复选框';
                case 'radio': return '单选框';
                case 'select': return '选择器';
                case 'date-picker': return '日期选择器';
                case 'time-picker': return '时间选择器';
                case 'upload': return '上传';
                case 'form': return '表单';
                case 'table': return '表格';
                case 'pagination': return '分页';
                case 'tag': return '标签';
                case 'badge': return '徽章';
                case 'avatar': return '头像';
                case 'alert': return '警告';
                case 'loading': return '加载';
                case 'message': return '消息';
                case 'notification': return '通知';
                case 'menu': return '菜单';
                case 'tabs': return '标签页';
                case 'breadcrumb': return '面包屑';
                case 'dropdown': return '下拉菜单';
                case 'steps': return '步骤条';
                case 'dialog': return '对话框';
                case 'tooltip': return '文字提示';
                case 'popover': return '弹出框';
                case 'card': return '卡片';
                case 'carousel': return '走马灯';
                case 'collapse': return '折叠面板';
                case 'timeline': return '时间线';
                case 'divider': return '分割线';
                case 'calendar': return '日历';
                case 'image': return '图片';
                case 'backtop': return '回到顶部';
                case 'infiniteScroll': return '无限滚动';
                case 'drawer': return '抽屉';
                case 'color-picker': return '颜色选择器';
                case 'container': return '容器';
                default: return this.type;
            }
        },
        // 判断是否为容器组件
        isContainer() {
            return this.type === 'container';
        }
    },
    watch: {
        x(newVal) {
            this.innerX = newVal;
        },
        y(newVal) {
            this.innerY = newVal;
        },
        width(newVal) {
            if (newVal !== null) {
                this.innerWidth = newVal;
            }
        },
        height(newVal) {
            if (newVal !== null) {
                this.innerHeight = newVal;
            }
        },
        selected(newVal) {
            this.isSelected = newVal;
        }
    },
    mounted() {
        // 添加全局鼠标事件监听
        document.addEventListener('mousemove', this.handleMouseMove);
        document.addEventListener('mouseup', this.handleMouseUp);

        // 如果没有明确设置宽高，尝试自动调整尺寸
        if (!this.width || !this.height) {
            this.$nextTick(() => {
                this.autoResizeToContent();
            });
        } else {
            // 如果明确设置了宽高，直接使用
            this.innerWidth = this.width;
            this.innerHeight = this.height;
        }

        // 添加组件样式
        if (!document.getElementById('element-wrapper-styles')) {
            const styleEl = document.createElement('style');
            styleEl.id = 'element-wrapper-styles';
            styleEl.textContent = `
        .element-wrapper {
          transition: transform 0.2s, box-shadow 0.2s;
        }
        .element-wrapper-hover:not(.is-selected) {
          box-shadow: 0 0 8px rgba(0, 0, 0, 0.1);
          z-index: 2 !important;
        }
        .element-wrapper-handle {
          display: flex;
          align-items: center;
          padding: 2px 8px;
          background-color: #409EFF;
          color: white;
          font-size: 12px;
          cursor: move;
          position: absolute;
          top: -24px;
          left: 0;
          right: 0;
          height: 24px;
          border-radius: 3px 3px 0 0;
          z-index: 1;
          box-shadow: 0 -2px 5px rgba(0, 0, 0, 0.1);
        }
        .element-wrapper-title {
          flex: 1;
          white-space: nowrap;
          overflow: hidden;
          text-overflow: ellipsis;
        }
        .element-wrapper-type-icon {
          margin-right: 5px;
          font-size: 14px;
        }
        .element-wrapper-remove {
          cursor: pointer;
          font-size: 16px;
          font-weight: bold;
          margin-left: 8px;
          width: 16px;
          height: 16px;
          display: flex;
          align-items: center;
          justify-content: center;
          border-radius: 50%;
          transition: background-color 0.2s;
        }
        .element-wrapper-remove:hover {
          background-color: rgba(255, 255, 255, 0.2);
        }
        .element-wrapper-info {
          position: absolute;
          bottom: -20px;
          right: 0;
          background-color: rgba(0, 0, 0, 0.6);
          color: white;
          font-size: 10px;
          padding: 2px 6px;
          border-radius: 2px;
          pointer-events: none;
        }
        .resize-handle {
          position: absolute;
          width: 8px;
          height: 8px;
          background-color: #409EFF;
          border: 1px solid white;
          border-radius: 50%;
          z-index: 10;
        }
        .resize-handle:hover {
          transform: scale(1.2);
        }
        .resize-nw { top: -4px; left: -4px; cursor: nw-resize; }
        .resize-n { top: -4px; left: 50%; margin-left: -4px; cursor: n-resize; }
        .resize-ne { top: -4px; right: -4px; cursor: ne-resize; }
        .resize-e { top: 50%; right: -4px; margin-top: -4px; cursor: e-resize; }
        .resize-se { bottom: -4px; right: -4px; cursor: se-resize; }
        .resize-s { bottom: -4px; left: 50%; margin-left: -4px; cursor: s-resize; }
        .resize-sw { bottom: -4px; left: -4px; cursor: sw-resize; }
        .resize-w { top: 50%; left: -4px; margin-top: -4px; cursor: w-resize; }
        .is-dragging {
          opacity: 0.8;
          cursor: move !important;
        }
        .is-resizing {
          opacity: 0.9;
        }
        .element-type-button .element-wrapper-content {
          display: flex;
          align-items: center;
          justify-content: center;
        }
        .element-type-input .element-wrapper-content {
          display: flex;
          align-items: center;
        }
        .element-type-card .element-wrapper-content {
          height: 100%;
        }
        .element-type-container .element-wrapper-content {
          height: 100%;
          min-height: 100px;
          display: flex;
          flex-direction: column;
          align-items: center;
          justify-content: center;
        }
        .container-placeholder {
          color: #909399;
          font-size: 14px;
          text-align: center;
          padding: 20px;
          width: 100%;
          height: 100%;
          display: flex;
          align-items: center;
          justify-content: center;
        }
        .container-dropzone {
          width: 100%;
          height: 100%;
          position: relative;
          overflow: auto;
        }
        .container-dropzone.highlight {
          background-color: rgba(64, 158, 255, 0.1);
          border: 2px dashed #409EFF;
        }
      `;
            document.head.appendChild(styleEl);
        }
    },
    beforeUnmount() {
        // 移除事件监听
        document.removeEventListener('mousemove', this.handleMouseMove);
        document.removeEventListener('mouseup', this.handleMouseUp);
        
        // 断开内容观察器连接
        if (this.contentObserver) {
            this.contentObserver.disconnect();
            this.contentObserver = null;
        }
    },
    methods: {
        // 自动调整尺寸以适应内容
        autoResizeToContent() {
            // 获取内容元素
            const contentEl = this.$el.querySelector('.element-wrapper-content');
            if (!contentEl) return;

            // 获取内容元素中的第一个子元素（实际组件）
            const componentEl = contentEl.firstElementChild;
            if (!componentEl) return;

            // 创建一个临时容器来测量组件的实际尺寸
            const tempContainer = document.createElement('div');
            tempContainer.style.position = 'absolute';
            tempContainer.style.visibility = 'hidden';
            tempContainer.style.pointerEvents = 'none';
            tempContainer.style.zIndex = '-1000';
            tempContainer.style.top = '0';
            tempContainer.style.left = '0';
            tempContainer.style.width = 'auto';
            tempContainer.style.height = 'auto';
            tempContainer.style.whiteSpace = 'nowrap'; // 防止文本换行
            tempContainer.style.display = 'inline-block';
            
            // 克隆组件元素到临时容器
            const clonedComponent = componentEl.cloneNode(true);
            
            // 移除可能影响尺寸的样式
            clonedComponent.style.width = 'auto';
            clonedComponent.style.height = 'auto';
            clonedComponent.style.position = 'static';
            clonedComponent.style.margin = '0';
            clonedComponent.style.boxSizing = 'content-box';
            
            tempContainer.appendChild(clonedComponent);
            document.body.appendChild(tempContainer);
            
            // 获取组件的实际尺寸
            let width = clonedComponent.offsetWidth;
            let height = clonedComponent.offsetHeight;
            
            // 如果尺寸为0，尝试从原始组件获取
            if (width === 0 || height === 0) {
                width = componentEl.offsetWidth;
                height = componentEl.offsetHeight;
                
                // 如果仍然为0，使用默认尺寸
                if (width === 0 || height === 0) {
                    const defaultSize = this.getDefaultSize();
                    width = width || defaultSize.width;
                    height = height || defaultSize.height;
                    console.log(`[ElementWrapper] Using default size for ${this.type}: ${width}x${height}`);
                }
            }
            
            // 根据组件类型进行智能调整
            const adjustments = this.getComponentSizeAdjustments(this.type, componentEl);
            width += adjustments.width;
            height += adjustments.height;
            
            // 移除临时容器
            document.body.removeChild(tempContainer);
            
            // 设置最小尺寸
            width = Math.max(width, 30);
            height = Math.max(height, 20);
            
            // 更新内部尺寸
            this.innerWidth = width;
            this.innerHeight = height;
            
            // 触发尺寸变化事件
            this.$emit('update:width', width);
            this.$emit('update:height', height);
            
            // 标记已自动调整尺寸
            this.hasAutoResized = true;
            
            console.log(`[ElementWrapper] Auto-resized ${this.type} to ${width}x${height}`);
            
            // 设置MutationObserver监听内容变化
            this.setupContentObserver(componentEl);
        },
        
        // 设置内容观察器
        setupContentObserver(componentEl) {
            // 如果已经有观察器，先断开连接
            if (this.contentObserver) {
                this.contentObserver.disconnect();
            }
            
            // 创建新的观察器
            this.contentObserver = new MutationObserver((mutations) => {
                // 检查是否有内容变化
                const hasContentChanged = mutations.some(mutation => 
                    mutation.type === 'childList' || 
                    mutation.type === 'characterData' ||
                    (mutation.type === 'attributes' && 
                     (mutation.attributeName === 'style' || 
                      mutation.attributeName === 'class'))
                );
                
                if (hasContentChanged) {
                    // 重置标志，允许重新调整尺寸
                    this.hasAutoResized = false;
                    
                    // 在下一个渲染周期调整尺寸
                    this.$nextTick(() => {
                        this.autoResizeToContent();
                    });
                }
            });
            
            // 配置观察器
            const config = { 
                attributes: true, 
                childList: true, 
                characterData: true,
                subtree: true 
            };
            
            // 开始观察
            this.contentObserver.observe(componentEl, config);
        },
        
        // 获取组件尺寸调整值
        getComponentSizeAdjustments(type, componentEl) {
            // 默认调整
            let widthAdjustment = 10; // 默认添加一些内边距
            let heightAdjustment = 10;
            
            // 根据组件类型进行特殊处理
            switch (type) {
                case 'button':
                    // 按钮需要额外的内边距
                    widthAdjustment = 20;
                    heightAdjustment = 10;
                    break;
                    
                case 'input':
                    // 输入框需要额外的宽度
                    widthAdjustment = 40;
                    heightAdjustment = 6;
                    break;
                    
                case 'card':
                    // 卡片需要额外的内边距
                    widthAdjustment = 30;
                    heightAdjustment = 30;
                    
                    // 检查卡片是否有标题和内容
                    const hasTitle = componentEl.querySelector('.el-card__header');
                    const hasContent = this.componentProps.content && this.componentProps.content.length > 0;
                    
                    // 根据内容调整高度
                    if (hasTitle && hasContent) {
                        heightAdjustment += 20;
                    }
                    break;
                    
                case 'alert':
                    // 警告框需要额外的宽度和高度
                    widthAdjustment = 40;
                    heightAdjustment = 20;
                    break;
                    
                case 'tag':
                    // 标签需要额外的内边距
                    widthAdjustment = 16;
                    heightAdjustment = 4;
                    break;
                    
                case 'switch':
                    // 开关需要额外的宽度
                    widthAdjustment = 10;
                    heightAdjustment = 4;
                    break;
                    
                case 'slider':
                    // 滑块需要额外的高度
                    widthAdjustment = 20;
                    heightAdjustment = 16;
                    break;
                    
                case 'progress':
                    // 进度条需要额外的高度
                    widthAdjustment = 10;
                    heightAdjustment = 10;
                    break;
                    
                default:
                    // 其他组件使用默认调整
                    break;
            }
            
            // 检查组件是否有文本内容
            const textContent = componentEl.textContent?.trim();
            if (textContent && textContent.length > 0) {
                // 根据文本长度调整宽度
                const textLength = textContent.length;
                if (type === 'button' || type === 'tag') {
                    widthAdjustment += Math.min(textLength * 8, 100); // 每个字符增加8px，最多增加100px
                }
            }
            
            return { width: widthAdjustment, height: heightAdjustment };
        },

        // 获取默认尺寸
        getDefaultSize() {
            switch (this.type) {
                case 'button':
                    return { width: 120, height: 40 };
                case 'input':
                    return { width: 200, height: 40 };
                case 'card':
                    return { width: 300, height: 200 };
                case 'switch':
                    return { width: 40, height: 20 };
                case 'slider':
                    return { width: 200, height: 40 };
                case 'progress':
                    return { width: 200, height: 20 };
                case 'rate':
                    return { width: 120, height: 40 };
                case 'checkbox':
                    return { width: 120, height: 40 };
                case 'radio':
                    return { width: 120, height: 40 };
                case 'select':
                    return { width: 200, height: 40 };
                case 'date-picker':
                    return { width: 200, height: 40 };
                case 'time-picker':
                    return { width: 200, height: 40 };
                case 'upload':
                    return { width: 200, height: 100 };
                case 'form':
                    return { width: 400, height: 300 };
                case 'table':
                    return { width: 500, height: 300 };
                case 'pagination':
                    return { width: 400, height: 40 };
                case 'tag':
                    return { width: 80, height: 32 };
                case 'badge':
                    return { width: 40, height: 40 };
                case 'avatar':
                    return { width: 40, height: 40 };
                case 'alert':
                    return { width: 300, height: 60 };
                case 'container':
                    return { width: 400, height: 300 };
                default:
                    return { width: 200, height: 100 };
            }
        },

        // 选择组件
        selectComponent(event) {
            if (!this.isSelected) {
                this.isSelected = true;
                this.$emit('update:selected', true);
                this.$emit('select', this.id);
            }
            event.stopPropagation();
            event.preventDefault();
        },

        // 开始拖拽
        startDrag(event) {
            this.isDragging = true;
            this.dragStartX = event.clientX;
            this.dragStartY = event.clientY;
            this.dragStartLeft = this.innerX;
            this.dragStartTop = this.innerY;

            this.$emit('drag-start', {
                id: this.id,
                x: this.innerX,
                y: this.innerY,
                width: this.innerWidth,
                height: this.innerHeight,
                event
            });

            event.preventDefault();
            event.stopPropagation();
        },

        // 开始缩放
        startResize(event, direction) {
            this.isResizing = true;
            this.resizeDirection = direction;
            this.resizeStartX = event.clientX;
            this.resizeStartY = event.clientY;
            this.resizeStartWidth = this.innerWidth;
            this.resizeStartHeight = this.innerHeight;

            this.$emit('resize-start', {
                id: this.id,
                x: this.innerX,
                y: this.innerY,
                width: this.innerWidth,
                height: this.innerHeight,
                direction,
                event
            });

            event.preventDefault();
            event.stopPropagation();
        },

        // 处理鼠标移动
        handleMouseMove(event) {
            if (this.isDragging) {
                this.handleDrag(event);
            } else if (this.isResizing) {
                this.handleResize(event);
            }
        },

        // 处理拖拽
        handleDrag(event) {
            const deltaX = event.clientX - this.dragStartX;
            const deltaY = event.clientY - this.dragStartY;

            const newX = this.dragStartLeft + deltaX;
            const newY = this.dragStartTop + deltaY;

            this.innerX = Math.max(0, newX);
            this.innerY = Math.max(0, newY);

            this.$emit('update:x', this.innerX);
            this.$emit('update:y', this.innerY);
            this.$emit('drag', {
                id: this.id,
                x: this.innerX,
                y: this.innerY,
                width: this.innerWidth,
                height: this.innerHeight,
                event
            });
        },
        printLog(msg){
            console.log(JSON.stringify(msg));
        },
        // 处理缩放
        handleResize(event) {
            const deltaX = event.clientX - this.resizeStartX;
            const deltaY = event.clientY - this.resizeStartY;

            let newWidth = this.resizeStartWidth;
            let newHeight = this.resizeStartHeight;
            let newX = this.innerX;
            let newY = this.innerY;

            // 根据缩放方向调整尺寸和位置
            switch (this.resizeDirection) {
                // 角控制点
                case 'nw':
                    newWidth = this.resizeStartWidth - deltaX;
                    newHeight = this.resizeStartHeight - deltaY;
                    newX = this.innerX + deltaX;
                    newY = this.innerY + deltaY;
                    break;
                case 'ne':
                    newWidth = this.resizeStartWidth + deltaX;
                    newHeight = this.resizeStartHeight - deltaY;
                    newY = this.innerY + deltaY;
                    break;
                case 'sw':
                    newWidth = this.resizeStartWidth - deltaX;
                    newHeight = this.resizeStartHeight + deltaY;
                    newX = this.innerX + deltaX;
                    break;

                // 中间控制点
                case 'n':
                    newHeight = this.resizeStartHeight - deltaY;
                    newY = this.innerY + deltaY;
                    break;
                case 'e':
                    newWidth = this.resizeStartWidth + deltaX;
                    break;
                case 's':
                    newHeight = this.resizeStartHeight + deltaY;
                    break;
                case 'w':
                    newWidth = this.resizeStartWidth - deltaX;
                    newX = this.innerX + deltaX;
                    break;
                case 'se':
                    newWidth = this.resizeStartWidth + deltaX;
                    newHeight = this.resizeStartHeight + deltaY;
                    break;
            }

            // 最小尺寸限制
            const minWidth = 30;
            const minHeight = 20;
            newWidth = Math.max(minWidth, newWidth);
            newHeight = Math.max(minHeight, newHeight);

            // 更新位置和尺寸
            this.innerWidth = newWidth;
            this.innerHeight = newHeight;
            this.innerX = newX;
            this.innerY = newY;

            this.$emit('update:width', newWidth);
            this.$emit('update:height', newHeight);
            this.$emit('update:x', newX);
            this.$emit('update:y', newY);
            this.$emit('resize', {
                id: this.id,
                x: newX,
                y: newY,
                width: newWidth,
                height: newHeight,
                direction: this.resizeDirection,
                event
            });
        },

        // 处理鼠标释放
        handleMouseUp() {
            if (this.isDragging) {
                this.isDragging = false;
                this.$emit('drag-end', {
                    id: this.id,
                    x: this.innerX,
                    y: this.innerY,
                    width: this.innerWidth,
                    height: this.innerHeight
                });
            }

            if (this.isResizing) {
                this.isResizing = false;
                this.$emit('resize-end', {
                    id: this.id,
                    x: this.innerX,
                    y: this.innerY,
                    width: this.innerWidth,
                    height: this.innerHeight,
                    direction: this.resizeDirection
                });
                this.resizeDirection = '';
            }
        },

        // 删除组件
        removeComponent(event) {
            event.stopPropagation();
            this.$emit('remove', this.id);
        },

        // 渲染组件
        renderComponent() {
            // 如果尺寸还未确定，使用默认内容并尝试自动调整尺寸
            if (this.innerWidth === null || this.innerHeight === null) {
                // 临时设置一个基本尺寸以便渲染
                if (this.innerWidth === null) this.innerWidth = 100;
                if (this.innerHeight === null) this.innerHeight = 40;
                
                // 在下一个渲染周期尝试自动调整尺寸
                this.$nextTick(() => {
                    if (!this.hasAutoResized) {
                        this.autoResizeToContent();
                    }
                });
            }
            // 根据组件类型返回适当的内容
            const props = this.componentProps || {};
            
            switch (this.type) {
                case 'button':
                    return  props.content || '按钮';
                    
                case 'input':
                    // 输入框不需要内容
                    return '';
                    
                case 'card':
                    // 卡片内容可能是复杂结构，这里简化处理
                    return props.content || '';
                    
                case 'switch':
                    // 开关不需要内容
                    return '';
                    
                case 'slider':
                    // 滑块不需要内容
                    return '';
                    
                case 'progress':
                    // 进度条不需要内容
                    return '';
                    
                case 'tag':
                    return props.content || '标签';
                    
                case 'alert':
                    // alert组件会自动使用title属性
                    return '';
                    
                case 'checkbox':
                    return props.label || '复选框';
                    
                case 'radio':
                    return props.label || '单选框';
                
                case 'container':
                    // 容器组件显示提示文本或标题
                    return props.content || '拖拽组件到这里';
                    
                // 其他组件类型的处理...
                default:
                    // 对于未明确处理的组件类型，尝试使用通用属性
                    if (props.content) return props.content;
                    if (props.label) return props.label;
                    if (props.title) return props.title;
                    if (props.text) return props.text;
                    
                    // 如果没有找到合适的内容，返回组件显示名称
                    return '';
            }
        },

        // 获取组件特定样式
        getComponentSpecificStyle() {
            const baseStyle = {};

            switch (this.type) {
                case 'button':
                    baseStyle.display = 'flex';
                    baseStyle.alignItems = 'center';
                    baseStyle.justifyContent = 'center';
                    break;
                case 'input':
                    baseStyle.padding = '0';
                    break;
                case 'card':
                    baseStyle.overflow = 'auto';
                    break;
                case 'alert':
                    baseStyle.margin = '0';
                    break;
                case 'tag':
                    baseStyle.display = 'flex';
                    baseStyle.alignItems = 'center';
                    baseStyle.justifyContent = 'center';
                    break;
                case 'container':
                    baseStyle.backgroundColor = '#f9f9f9';
                    baseStyle.border = '1px dashed #dcdfe6';
                    baseStyle.borderRadius = '4px';
                    baseStyle.padding = '10px';
                    baseStyle.overflow = 'auto';
                    baseStyle.position = 'relative';
                    baseStyle.minHeight = '100px';
                    break;
                default:
                    break;
            }

            return baseStyle;
        },

        // 容器拖拽事件处理
        onDragOver(event) {
            if (this.isContainer) {
                this.isDragOver = true;
                event.dataTransfer.dropEffect = 'move';
            }
        },

        onDragLeave(event) {
            if (this.isContainer) {
                this.isDragOver = false;
            }
        },

        onDrop(event) {
            if (this.isContainer) {
                event.preventDefault();
                event.stopPropagation();
                this.isDragOver = false;
                // 获取拖拽数据
                const componentType = event.dataTransfer.getData('componentType') || 
                                    event.dataTransfer.getData('component-type');
                
                if (componentType) {
                    // 获取容器相对位置
                    const rect = event.target.getBoundingClientRect();
                    const x = event.clientX - rect.left;
                    const y = event.clientY - rect.top;
                    this.printLog("onDrop >>1")
                    // 发出添加子组件事件
                    this.$emit('add-child', {
                        type: componentType,
                        props: this.getDefaultPropsForType(componentType),
                        x,
                        y,
                        width: this.getDefaultWidthForType(componentType),
                        height: this.getDefaultHeightForType(componentType),
                        containerId: this.id
                    });
                }
            }
        },
        
        // 获取组件的默认属性
        getDefaultPropsForType(type) {
            switch (type) {
                case 'button':
                    return { text: '按钮', type: 'primary' };
                case 'input':
                    return { placeholder: '请输入内容' };
                case 'card':
                    return { title: '卡片标题', content: '卡片内容' };
                case 'switch':
                    return { value: false };
                case 'slider':
                    return { value: 50 };
                case 'progress':
                    return { percentage: 50 };
                case 'tag':
                    return { content: '标签' };
                case 'alert':
                    return { title: '提示信息', type: 'info' };
                default:
                    return {};
            }
        },
        
        // 获取组件的默认宽度
        getDefaultWidthForType(type) {
            switch (type) {
                case 'button': return 120;
                case 'input': return 200;
                case 'card': return 300;
                case 'switch': return 40;
                case 'slider': return 200;
                case 'progress': return 200;
                case 'tag': return 80;
                case 'alert': return 300;
                default: return 100;
            }
        },
        
        // 获取组件的默认高度
        getDefaultHeightForType(type) {
            switch (type) {
                case 'button': return 40;
                case 'input': return 40;
                case 'card': return 200;
                case 'switch': return 20;
                case 'slider': return 40;
                case 'progress': return 20;
                case 'tag': return 32;
                case 'alert': return 60;
                default: return 100;
            }
        }
    },
    template: `
    <div
      :style="style"
      :class="{
        'element-wrapper': true,
        'is-selected': isSelected,
        'is-dragging': isDragging,
        'is-resizing': isResizing,
        ['element-type-' + type]: true
      }"
      @click="selectComponent"
      @mouseenter="$el.classList.add('element-wrapper-hover')"
      @mouseleave="$el.classList.remove('element-wrapper-hover')"
    >
      <!-- 拖拽句柄 -->
      <div
        v-if="isSelected"
        class="element-wrapper-handle"
        @mousedown="startDrag"
      >
        <span class="element-wrapper-type-icon" :class="'el-icon-' + type"></span>
        <span class="element-wrapper-title">{{ componentDisplayName }}</span>
        <span class="element-wrapper-remove" @click="removeComponent" title="删除组件">×</span>
      </div>
      
      <!-- 组件内容 -->
      <div class="element-wrapper-content" :style="getComponentSpecificStyle()">
        <!-- 容器组件 -->
        <div v-if="isContainer" 
             class="container-dropzone"
             :class="{ 'highlight': isDragOver }"
             @dragover.prevent="onDragOver"
             @dragleave.prevent="onDragLeave"
             @drop.prevent="onDrop">
                <div v-if="wrapperChildren.length==0 &&!$slots.default" class="container-placeholder">
                {{ renderComponent() }}
                </div>
                <component 
                    v-else
                    v-for="child in wrapperChildren"
                    :key="child.id"
                    v-bind="child.props"
                    :is="'el-' + child.type"
                    style="transition: all 0.3s ease;">
                            {{ renderComponent() }}
                </component>
        </div>
        <!-- 普通组件 -->
        <component
          v-else
          :is="'el-' + type"
          v-bind="componentProps"
          style="transition: all 0.3s ease;"
        >
          {{ renderComponent() }}
        </component>
      </div>
      
      <!-- 组件尺寸信息 -->
      <div v-if="isSelected || isDragging || isResizing" class="element-wrapper-info">
        {{ Math.round(innerWidth) }} × {{ Math.round(innerHeight) }}
      </div>
      
      <!-- 缩放句柄 - 增加了中间控制点 -->
      <template v-if="isSelected">
        <!-- 角控制点 -->
        <div class="resize-handle resize-nw" @mousedown="(e) => startResize(e, 'nw')" title="调整大小"></div>
        <div class="resize-handle resize-ne" @mousedown="(e) => startResize(e, 'ne')" title="调整大小"></div>
        <div class="resize-handle resize-sw" @mousedown="(e) => startResize(e, 'sw')" title="调整大小"></div>
        <div class="resize-handle resize-se" @mousedown="(e) => startResize(e, 'se')" title="调整大小"></div>
        
        <!-- 中间控制点 -->
        <div class="resize-handle resize-n" @mousedown="(e) => startResize(e, 'n')" title="调整高度"></div>
        <div class="resize-handle resize-e" @mousedown="(e) => startResize(e, 'e')" title="调整宽度"></div>
        <div class="resize-handle resize-s" @mousedown="(e) => startResize(e, 's')" title="调整高度"></div>
        <div class="resize-handle resize-w" @mousedown="(e) => startResize(e, 'w')" title="调整宽度"></div>
      </template>
    </div>
  `
};